<template>
  <section>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" size="small" @click="showAddOrEdit(null)" icon="el-icon-plus">新增</el-button>
        <el-button size="small" @click="getDataList" icon="el-icon-refresh">刷新</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="sysconfigList" border highlight-current-row v-loading="listLoading" @selection-change="selsChange">
      <el-table-column header-align="center" align="center" type="selection" width="55"></el-table-column>
      <el-table-column header-align="center" align="center" type="index" width="50"></el-table-column>
      <el-table-column header-align="center" align="center" prop="propertyName" label="名称"></el-table-column>
      <el-table-column header-align="center" align="center" prop="propertyValue" label="值"></el-table-column>
      <el-table-column header-align="center" align="center" prop="meaning" label="备注"></el-table-column>
      <el-table-column header-align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="update(scope.row)" round>修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length==0">批量删除</el-button>
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-sizes="pageSizes"
                     :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增编辑-->
    <el-dialog :title="formTitle" :visible.sync="addOrUpdateVisible" :close-on-click-modal="false">
      <el-form :model="sysconfigForm" label-width="100px" :rules="sysconfigFormRules">
        <el-form-item label="名称" prop="propertyName">
          <el-input v-model="sysconfigForm.propertyName"/>
        </el-form-item>
        <el-form-item label="值" prop="propertyValue">
          <el-input v-model="sysconfigForm.propertyValue"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="sysconfigForm.meaning"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOrUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" :loading="submitLoading">确定</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
  import API from '@/api'
    export default {
        name: "index",
      data(){
          return {
            formTitle:"新增",
            addOrUpdateVisible:false,
            submitLoading:false,
            sysconfigForm:{},
            sysconfigFormInit:{
              id:"",
              propertyName:"",
              propertyValue:"",
              meaning:""
            },
            sysconfigFormRules:{
              propertyName:[
                {required:true,message:"参数名称不得为空",trigger:'blur'}
              ],
              propertyValue:[
                {required:true,message:"参数值不得为空",trigger:'blur'}
              ]
            },

            pageSize:10,
            pageSizes:[5,10,20,50],
            pageIndex:1,
            total:0,

            sysconfigList:[],
            listLoading:false,

            idList:[],
            sels:[],
          }
      },
      methods:{
        showAddOrEdit(value){
          this.sysconfigForm = !!value ? value : Object.assign({},this.sysconfigFormInit);
          this.formTitle = !!value ? "编辑" : "新增";
          this.addOrUpdateVisible = true;
        },
        dataFormSubmit(){
          let tick = !!this.sysconfigForm.id ? API.sysconfig.modify(this.sysconfigForm) : API.sysconfig.add(this.sysconfigForm);
          tick.then(res=>{
            console.log(res.data);
            if(!res.data.code){
              this.$message({
                type:"success",
                message:!!this.sysconfigForm.id?"修改成功":"添加成功"
              });
              this.getDataList();
              this.addOrUpdateVisible = false;
            }else {
              this.$message.error(res.data.msg);
            }
          }).catch(error=>{
            console.error(error);
          })
        },
        getDataList(){
          this.listLoading = true;
          let param = {
            limit:this.pageSize,
            page:this.pageIndex
          };
          API.sysconfig.list(param).then(res=>{
            console.log(res.data);
            if(!res.data.code){
              this.sysconfigList = res.data.page.list;
              this.total = res.data.page.totalCount;
            }
            this.listLoading = false;
          }).catch(error=>{
            console.error(error);
            this.listLoading = false;
          })
        },
        handleSizeChange(value){
          this.pageSize = value;
          this.getDataList();
        },
        handleCurrentChange(value){
          this.pageIndex = value;
          this.getDataList();
        },
        selsChange(value){
          this.sels = value;
        },
        batchRemove(){
          this.$confirm('此操作将永久删除这些配置信息，是否继续','警告',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
          }).then(()=>{
            this.idList = this.sels.map(item=>item.id).toString().split(",");
            API.sysconfig.removeBatch(this.idList).then(res=>{
              if(!res.data.code){
                this.$message({
                  message:"删除成功",
                  type:"success"
                });
                this.getDataList();
              }else{
                this.$message.error(res.data.msg);
              }
            }).catch(error=>{
              console.error(error);
            })
          })
        },
        update(value){
          this.sysconfigForm = value;
          this.addOrUpdateVisible = true;
        }
      },
      created(){
          this.getDataList();
      }
    }
</script>

<style scoped>

</style>
